<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青云门修真攻略 - MMORPG门派指南</title>
    <link rel="stylesheet" href="src/styles/main.css">
    <link rel="stylesheet" href="src/styles/components.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <img src="assets/qingyun-logo.png" alt="青云门" class="logo-img">
                    <span class="logo-text">青云门修真攻略</span>
                </div>
                <nav class="nav">
                    <ul class="nav-list">
                        <li><a href="#overview" class="nav-link active">门派概览</a></li>
                        <li><a href="#skills" class="nav-link">技能修炼</a></li>
                        <li><a href="#pve" class="nav-link">试炼攻略</a></li>
                        <li><a href="#pvp" class="nav-link">论道切磋</a></li>
                        <li><a href="#equipment" class="nav-link">法宝装备</a></li>
                        <li><a href="#tools" class="nav-link">修炼工具</a></li>
                    </ul>
                </nav>
                <div class="version-info">
                    <span class="version">v3.2.1</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main">
        <!-- 门派概览部分 -->
        <section id="overview" class="section overview-section">
            <div class="container">
                <div class="section-header">
                    <h1 class="section-title">青云门概览</h1>
                    <p class="section-subtitle">修道求仙，剑指苍穹</p>
                </div>
                
                <div class="overview-grid">
                    <div class="overview-card main-card">
                        <div class="card-header">
                            <h2>门派介绍</h2>
                        </div>
                        <div class="card-content">
                            <p>青云门乃修仙正道第一大派，以剑法精妙、道法高深而闻名于世。门中弟子修炼太极玄清道，追求天人合一之境界。</p>
                            <div class="sect-stats">
                                <div class="stat-item">
                                    <span class="stat-label">职业定位</span>
                                    <span class="stat-value">远程法师 / 控制辅助</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">操作难度</span>
                                    <div class="difficulty-stars">
                                        <span class="star active">★</span>
                                        <span class="star active">★</span>
                                        <span class="star active">★</span>
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                    </div>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">推荐指数</span>
                                    <div class="rating">
                                        <span class="rating-value">9.2</span>
                                        <span class="rating-max">/10</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="overview-card">
                        <div class="card-header">
                            <h3>门派特色</h3>
                        </div>
                        <div class="card-content">
                            <ul class="feature-list">
                                <li>🗡️ <strong>剑法精妙</strong>：远程攻击，威力强大</li>
                                <li>⚡ <strong>雷法神通</strong>：群体控制，范围伤害</li>
                                <li>🛡️ <strong>护体真气</strong>：防御技能，减伤能力</li>
                                <li>✨ <strong>飞剑术</strong>：位移技能，灵活走位</li>
                            </ul>
                        </div>
                    </div>

                    <div class="overview-card">
                        <div class="card-header">
                            <h3>适合玩家</h3>
                        </div>
                        <div class="card-content">
                            <div class="player-types">
                                <div class="player-type">
                                    <span class="type-icon">🎯</span>
                                    <span class="type-name">输出导向</span>
                                </div>
                                <div class="player-type">
                                    <span class="type-icon">🧠</span>
                                    <span class="type-name">策略玩家</span>
                                </div>
                                <div class="player-type">
                                    <span class="type-icon">👥</span>
                                    <span class="type-name">团队合作</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 技能修炼部分 -->
        <section id="skills" class="section skills-section">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title">技能修炼</h2>
                    <p class="section-subtitle">修炼各式神通，掌握青云真谛</p>
                </div>

                <div class="skills-container">
                    <div class="skill-categories">
                        <button class="category-btn active" data-category="primary">主修功法</button>
                        <button class="category-btn" data-category="thunder">雷法神通</button>
                        <button class="category-btn" data-category="sword">剑法技艺</button>
                        <button class="category-btn" data-category="support">辅助心法</button>
                    </div>

                    <div class="skills-grid" id="skillsGrid">
                        <!-- 技能卡片将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
        </section>

        <!-- PVE试炼攻略部分 -->
        <section id="pve" class="section pve-section">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title">试炼攻略</h2>
                    <p class="section-subtitle">历练修为，征服各大秘境</p>
                </div>

                <div class="pve-tabs">
                    <button class="pve-tab active" data-tab="dungeons">秘境副本</button>
                    <button class="pve-tab" data-tab="bosses">BOSS攻略</button>
                    <button class="pve-tab" data-tab="leveling">练级指南</button>
                </div>

                <div class="pve-content" id="pveContent">
                    <!-- PVE内容将通过JavaScript动态加载 -->
                </div>
            </div>
        </section>

        <!-- PVP论道切磋部分 -->
        <section id="pvp" class="section pvp-section">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title">论道切磋</h2>
                    <p class="section-subtitle">与各派高手切磋，证道修真</p>
                </div>

                <div class="pvp-content">
                    <div class="pvp-strategies">
                        <h3>对战策略</h3>
                        <div class="strategy-grid" id="strategyGrid">
                            <!-- 策略内容将通过JavaScript生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 法宝装备部分 -->
        <section id="equipment" class="section equipment-section">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title">法宝装备</h2>
                    <p class="section-subtitle">神兵利器，助你修仙之路</p>
                </div>

                <div class="equipment-tabs">
                    <button class="equipment-tab active" data-tab="weapons">神兵利器</button>
                    <button class="equipment-tab" data-tab="armor">护体法宝</button>
                    <button class="equipment-tab" data-tab="accessories">配饰宝物</button>
                </div>

                <div class="equipment-content" id="equipmentContent">
                    <!-- 装备内容将通过JavaScript加载 -->
                </div>
            </div>
        </section>

        <!-- 修炼工具部分 -->
        <section id="tools" class="section tools-section">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title">修炼工具</h2>
                    <p class="section-subtitle">辅助计算，优化修炼方案</p>
                </div>

                <div class="tools-grid">
                    <div class="tool-card">
                        <h3>伤害计算器</h3>
                        <p>计算技能伤害和DPS</p>
                        <button class="tool-btn">开始计算</button>
                    </div>
                    <div class="tool-card">
                        <h3>加点模拟器</h3>
                        <p>模拟不同加点方案</p>
                        <button class="tool-btn">开始模拟</button>
                    </div>
                    <div class="tool-card">
                        <h3>装备对比</h3>
                        <p>对比装备属性收益</p>
                        <button class="tool-btn">开始对比</button>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 底部信息 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <p>&copy; 2024 青云门修真攻略. 数据来源于游戏版本 v3.2.1</p>
                <p>最后更新：2024年1月15日</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="src/scripts/data.js"></script>
    <script src="src/scripts/main.js"></script>
</body>
</html>